<!--
 @description 分享面板
 @fileName index.vue
 @author zengqiongying
 @created 2023/07/02 11:13:17
-->
<template>
  <Popup
    v-model="showSharePop"
    position="bottom"
    :show-title="false"
    :show-confirm-button="false"
    :show-cancel-button="false"
  >
    <div class="share-sheet-main">
      <div class="title">分享至：</div>
      <div class="content">
        <div class="item" @click.stop="handleShare('wechat')">
          <img src="@/assets/ic_wechat.png" class="icon">微信好友
        </div>
        <div class="item" @click.stop="handleShare('friend')">
          <img src="@/assets/ic_moment.png" class="icon">朋友圈
        </div>
      </div>
    </div>
  </Popup>
</template>

<script>
import Popup from '@/components/Popup'
export default {
  name: 'ShareSheet',
  components: { Popup },
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    }
  },

  computed: {
    showSharePop: {
      set(val) {
        this.$emit('input', val)
      },
      get(val) {
        return this.value
      }
    }
  },
  methods: {
    handleShare(type) {
      this.$emit('share', type)
    }
  }
}

</script>
<style lang='less' scoped>
  .share-sheet-main{
    padding:  0 16px;
    min-height: 144px;
    .title{
      font-size: 14px;
      color: #7E89A4;
    }
    .content{
      padding: 36px 0;
      display: flex;
      align-items: center;
      .item{
        margin:0 20px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 20px;
        font-size: 14px;
        color: #3C4458;
        font-weight: 600;
        .icon{
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
      }
    }

  }
</style>
